<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    html,
    body {
      height: 100%;
      width: 100%;
    }
    .box {
      width: 100%;
      height: 100%;
      padding: 20px;
      box-sizing: border-box;
      background-color: black;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: repeat(3, 400px);
      grid-gap: 20px 20px;
    }
    .item {
      background-color: rgb(64, 61, 61);
      position: relative;
      overflow: hidden;
    }
    .item::after {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      background: linear-gradient(180deg, red, blue, green, yellow);
      left: var(--x, -1000px);
      top: var(--y, -1000px);
      transform: translate(-50%, -50%);
      z-index: 1;
    }
    .shadow {
      position: absolute;
      inset: 2px;
      background-color: rgb(35, 33, 33);
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 60px;
      font-weight: 700;
      z-index: 2;
    }
  </style>
  <body>
    <div class="box">
      <div class="item">
        <div class="shadow">dsadsa</div>
      </div>
      <div class="item">
        <div class="shadow">dsadwqdwa</div>
      </div>
      <div class="item">
        <div class="shadow">vdsvwe</div>
      </div>
      <div class="item">
        <div class="shadow">fqwsad</div>
      </div>
      <div class="item">
        <div class="shadow">vewqfvcwevwe</div>
      </div>
      <div class="item">
        <div class="shadow">dqwcdsvervre</div>
      </div>
    </div>
  </body>
  <script>
    let items = document.querySelectorAll(".item");
    document.addEventListener("mousemove", function (e) {
      let clientX = e.clientX;
      let clientY = e.clientY;
      for (const item of items) {
        const { left, top } = item.getBoundingClientRect();
        item.style.setProperty("--x", clientX - left + "px");
        item.style.setProperty("--y", clientY - top + "px");
      }
    });
  </script>
</html>
